<template>
  <div id="processboard" class="flex-column">

    <div>
      <canvas id="myCanvas" ref="myCanvas" width="400px" height="225px"
              :style="{'background-image': 'url(data:image/png;base64,' + currentCameraUrl  + ')',
              'background-size':'contain',
    'background-position': 'center center',
    'background-repeat': 'no-repeat'
}"
              @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove">
      </canvas>
    </div>

    <div id="btnContainer">
      <el-button @click="start">开始</el-button>
      <el-button @click="save" type="primary">保存</el-button>
      <el-button @click="clearArea" type="danger">清除</el-button>
    </div>
  </div>

</template>
<style lang="scss">

</style>
<script>

// import {setRegion} from "@/api/monitorApi";

export default {
  name: "MonitorAreaView",
  // props:{
  //   currentCameraUrl:{
  //     type:String,
  //   }
  // },
  props:['currentCameraUrl'],
  data() {
    return {
      nowDate:{date:'----',time:'--',week:'--'},
      message: 'Hello Vue!',
      scrollerHeight1: '90%',
      scrollerHeight2: '70%',
      showarrow: 'none',
      x: 0,
      y: 0,
      xOffset:0,
      yOffset:0,
      // currentCameraUrl:'https://s2.loli.net/2022/07/14/f6rwJxc5vNXosI2.jpg',
      drawArea: false,
      canDraw: false
    };
  },

  mounted() {
    // eslint-disable-next-line no-unused-vars
    var that = this;
    that.$emit("initialized")
    console.log(this.currentCameraUrl)
  },

  filters:{},
  watch:{
  },
  computed:{},

  methods: {
    start(){
      this.canDraw = true;
    },
    save() {
      var fx = this.x;
      var fy = this.y;
      var fh = this.yOffset;
      var fw = this.xOffset;
      if(fh == 0 && fw == 0){
        alert("请绘制检测区");
        return;
      }
      console.log("x:" + fx);//x轴坐标
      console.log("y:" + fy);//y轴坐标
      console.log("xWidth:" + fw);//宽度
      console.log("yHeight:" + fh);//高度
      var info="x轴坐标:"+fx+" y轴坐标:"+fy+" 宽度:"+fw+" 高度:"+fh;
      alert(info);
      // setRegion({
      //   x:fx,
      //   y:fy,
      //   width:fw,
      //   height:fh
      // }).then((res)=>{
      //   console.log(res)
      // })
      this.$emit("finished",{
          x:fx,
          y:fy,
          width:fw,
          height:fh
      })
    },
    mousedown(e){
      this.drawArea = true;
      if(this.canDraw){
        this.x = e.offsetX; // 鼠标落下时的X
        this.y = e.offsetY; // 鼠标落下时的Y
        this.yOffset = 0;
        this.xOffset = 0;
      }
    },
    // eslint-disable-next-line no-unused-vars
    mouseup(e){
      this.drawArea = false;
    },
    mousemove(e){
      this.drawRect(e);
    },
    drawRect(e){
      if(this.drawArea && this.canDraw){
        var x = this.x;
        var y = this.y;
        this.xOffset = e.offsetX-x;
        this.yOffset = e.offsetY-y;
        this.drawRectWithParam(x,y,this.xOffset,this.yOffset);
      }
    },
    //根据4个参数绘制矩形
    drawRectWithParam(x,y,width,height){
      const canvas = this.$refs.myCanvas;
      var ctx = canvas.getContext("2d");

      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.beginPath();

      //设置线条颜色，必须放在绘制之前
      ctx.strokeStyle = '#00ff00';
      // 线宽设置，必须放在绘制之前
      ctx.lineWidth = 1;
      ctx.strokeRect(x,y,width,height);
    },
    //清除画的区域
    clearArea(){
      const canvas = this.$refs.myCanvas;
      var ctx = canvas.getContext("2d");
      this.x = 0;
      this.y = 0;
      this.yOffset = 0;
      this.xOffset = 0;
      ctx.clearRect(0,0,canvas.width,canvas.height);
    }
  }

}
</script>

